<template>
	<view class="zoneCard">
		<topHead :data="data"></topHead>
		<view class="dataList">
			<view class="item" v-for="(item,index) in data.carousel" :key="index" @click="handleProductDetail(item)">
				<image :src="getImg(item.img)" :lazy-load="true" class="goods_img" mode="widthFix">
				</image>
				<view class="title" v-if="type === 1">
					{{item.goods.extension_title}}
				</view>
				<view class="title" v-if="type === 2">
					{{item.goods.title}}
				</view>
				<view class="title" v-if="type === 3">
					{{item.goods.title}}
				</view>
				<view class="title" v-if="type === 4">
					{{item.goods.title}}
				</view>
				<view class="price">
					<text class="icon">￥</text>
					<text class="yuan">{{getPrice(item.goods.price,0)}}.</text>
					<text class="corner">{{getPrice(item.goods.price,1)}}/天</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import topHead from "./topHead.vue";
	export default {
		name: "zoneCard",
		props: {
			title: String,
			data: Object,
			type: Number,
		},
		components: {
			topHead,
		},
		methods: {
			handleProductDetail(item) {
				uni.navigateTo({
					url: `/pagesA/productDetails/productDetails?goods_id=${ item.jumpUrl }`
				})
			},
			getImg(url) {
				return this.$imgURL2 + url;
			},
			getPrice(price, index) {
				const priceArray = String(price).split(".");
				return priceArray[index];
			},
		}
	}
</script>

<style lang="scss" scoped>
	.zoneCard {
		margin-top: 30rpx;
		padding: 24rpx;
		box-sizing: border-box;
		background: linear-gradient(180deg, #FFFFFF 0%, #FFF9F9 100%);
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(116, 116, 116, 0.1);
		border-radius: 16rpx;
		overflow: hidden;

		.dataList {
			display: flex;
			overflow: scroll;

			.item {
				width: 136rpx;
				margin-right: 36rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				overflow: hidden;
				flex-shrink: 0;

				&:last-of-type {
					margin-right: 0;
				}

				.goods_img {
					width: 122rpx;
				}

				.title {
					text-align: center;
					font-size: 20rpx;
					-webkit-line-clamp: 2;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					// height: 60rpx;
				}

				.price {
					color: #E43C3A;
					white-space: nowrap;

					.icon {
						font-size: 16rpx;
					}

					.yuan {
						font-size: 28rpx;
					}

					.corner {
						font-size: 16rpx;
					}
				}
			}
		}
	}
</style>
